<template>
  <div >
      <!-- <j-input type="text" class="textBox" style="width: 150px;">
        <div slot="perfix" class="http http-pre"><div >http:</div></div>
      </j-input>
      <j-input type="text" class="textBox" readonly>
        <div slot="suffix" class="http http-suf"><div>http:</div></div>
      </j-input>
      <j-input type="text" class="textBox">
        <div slot="suffix" class="http http-suf"><div>Search</div></div>
      </j-input>
      <div style="width: 200px;">
        <div style="display: flex; background-color: bisque;border: 1px solid black;">
        <div style="background-color: greenyellow;padding-left: 5px;" >aaa</div>
        <div style="background-color: burlywood;width: 100%;">bbb</div>
        </div>
      </div> -->
      <JStyleInput v-model="text" @refcellchanged="refchanged"></JStyleInput>
  </div>
</template>

<script>
import JInput from './JInput.vue';
import JStyleInput from './JExcelStyleInput.vue';
import { reference } from '@popperjs/core';
export default {
  name: 'JInputDemo',
  data(){
    return {
      text:"=SUM(a4 + b4 + C4)"
    }
  },  
  components:{
    JInput,JStyleInput
  },
  methods:{
    refchanged(cells){
      console.log('refchanged',cells);
    }
  }
}
</script>

<style scoped>
.http{
  background: rgb(223, 223, 223);
  height: 100%;
  vertical-align: middle;
  padding: 0 5px;
  cursor:default;
  user-select: none;
}
.http-pre{
  border-radius: calc(var(--theme-border-radius) - 1px) 0px 0px calc(var(--theme-border-radius) - 1px);

}
.http-suf{
  border-radius: 0px calc(var(--theme-border-radius) - 1px) calc(var(--theme-border-radius) - 1px) 0px;
}
.textBox{
  display: inline-block;
  vertical-align: middle;
}
</style>